<template>
  <div class="face-valid-container">
    <!-- 背景 -->
    <div class="login">
    </div>

    <!--主容器-->
    <div class="login-mid">
      <div class="login-mid-top">
        <div class="shadow-top-left"></div>
        <div class="shadow-top-right"></div>
      </div>
      <div class="login-mid-mid">
        <!--捕获人脸区域-->
        <div class="videoCamera-canvasCamera">
              <video
                  v-show="!isWechatEnv && videoStream"
                  id="videoCamera"
                  class="camera-video"
                  :width="videoWidth"
                  :height="videoHeight"
                  autoplay
                  playsinline
                  webkit-playsinline
                  x5-video-player-type="h5"
                  x5-video-player-fullscreen="false"
                  x5-video-orientation="portrait"
                  muted
                  style="width: 100%; height: 100%; object-fit: cover;"
              ></video>
              
              <div v-if="isWechatEnv && cameraImage" class="preview-container">
                <img :src="cameraImage" class="preview-image" />
              </div>
              
              <canvas
                  style="display: none"
                  id="canvasCamera"
                  :width="videoWidth"
                  :height="videoHeight"
              ></canvas>

          <!--人脸特效区域-->
          <div v-if="faceImgState" class="face-special-effects-2"></div>
          <div v-else class="face-special-effects"></div>

          <!-- 微信环境下的提示 -->
          <div v-if="isWechatEnv && !wxReady" class="wx-loading">
            <div class="loading-spinner"></div>
            <div class="loading-text">{{ msg }}</div>
          </div>
          
          <!-- 权限引导提示 -->
          <div v-if="showGuide" class="guide-overlay">
            <div class="guide-content">
              <div class="guide-icon">📷</div>
              <div class="guide-title">{{ isWechatEnv ? '微信相机权限问题' : '需要使用摄像头' }}</div>
              <div class="guide-desc" v-if="isWechatEnv">
                微信正在验证相机权限或拒绝了相机访问。您可以：
                <br><br>
                1. 点击下方按钮重试
                <br>
                2. 在微信的设置中允许相机权限
                <br>
                3. 或使用浏览器摄像头继续
              </div>
              <div class="guide-desc" v-else>
                人脸验证需要访问您的前置摄像头，请点击下方按钮并在弹出的对话框中允许访问
              </div>
              <div class="guide-button-container">
                <button class="guide-button" @click="takeWechatPhoto">{{ isWechatEnv ? '重试微信相机' : '启用摄像头' }}</button>
                <button v-if="isWechatEnv" class="guide-button alt-button" @click="switchToBrowserCamera">使用浏览器摄像头</button>
              </div>
            </div>
          </div>
        </div>

        <!--按钮区域-->
        <div class="face-btn">
          <button @click="faceVef()">{{faceImgState ? '正在识别中...' : (isWechatEnv ? '重新拍照识别' : '手动触发识别')}}</button>
        </div>

        <!--消息区域-->
        <div class="msg">
            <div class="server-msg">{{msg}}</div>
            <div class="welcome">请面向摄像头并保持稳定</div>
        </div>

      </div>
      <div class="login-mid-bot">
        <div class="shadow-bot-left"></div>
        <div class="shadow-bot-right"></div>
      </div>
    </div>
  </div>
</template>
<script>
import $camera from '../../camera/index.js'
const jWeixin = require('jweixin-module');

export default {
  data() {
    return {
      videoWidth: 200,
      videoHeight: 200,
      msg: '准备中...',
      faceImgState: false,
      faceOption: {},
      isCameraReady: false,
      isWechatEnv: false,
      wxReady: false,
      videoStream: null,
      cameraImage: null,
      showGuide: false,
      retryCount: 0,
      maxRetries: 3,
      autoRecognitionTimer: null,
      autoRecognitionInterval: 3000, // 3秒自动识别一次
      recognitionActive: false,
      recognitionTimer: null,
      recognitionCount: 0,
      recognitionRetryCount: 0,
      recognitionFailed: false,
      recognitionInProgress: false,
      isIOS: false
    };
  },
  onLoad() {
    // iOS 首次进入自动刷新
    // this.isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
    // if (this.isIOS && !sessionStorage.getItem('iosRefreshed_faceValid')) {
    //   sessionStorage.setItem('iosRefreshed_faceValid', 'true');
    //   window.location.reload();
    //   return;
    // }
  },
  mounted() {
    // 检测环境
    this.detectEnvironment();
    
    // 添加全局错误处理以防止页面崩溃
    window.addEventListener('error', (event) => {
      console.error('全局错误捕获:', event.error || event.message);
      
      // 如果是微信相关错误，尝试切换到浏览器模式
      if (this.isWechatEnv && 
          (event.message.includes('wx') || event.message.includes('config') || event.message.includes('undefined'))) {
        console.log('检测到微信相关错误，将尝试切换到浏览器模式');
        this.isWechatEnv = false;
        setTimeout(() => {
          this.initBrowserCamera();
        }, 1000);
      }
      
      return true; // 允许默认处理
    });
    
    // 确保在页面加载10秒后，如果仍未初始化成功，则强制尝试浏览器模式
    setTimeout(() => {
      if (!this.isCameraReady) {
        console.log('初始化超时，尝试使用浏览器模式');
        this.isWechatEnv = false;
        this.msg = '初始化超时，尝试使用浏览器模式...';
        this.initBrowserCamera();
      }
    }, 10000);
  },
  beforeDestroy() {
    this.stopAutoRecognition();
    this.releaseCamera();
  },
  onShow() {
  },
  methods: {
    // 检测环境
    detectEnvironment() {
      // 判断是否为微信环境
      this.isWechatEnv = /MicroMessenger/i.test(navigator.userAgent);
      console.log('当前环境:', this.isWechatEnv ? '微信环境' : '浏览器环境');
      
      if (this.isWechatEnv) {
        // 微信环境初始化
        this.msg = '正在初始化微信环境...';
        this.initWechatJssdk();
      } else {
        // 浏览器环境初始化
        this.msg = '正在初始化摄像头...';
        setTimeout(() => {
          this.initBrowserCamera();
        }, 500);
      }
    },
    
    // 初始化微信JSSDK
    initWechatJssdk() {
      // 清除可能存在的旧jWeixin对象
      if (typeof jWeixin !== 'undefined' && !jWeixin.config) {
        console.log('检测到无效的jWeixin对象，将重置');
      }
      
      // 判断jWeixin对象是否存在且包含config方法
      if (typeof jWeixin === 'undefined' || typeof jWeixin.config !== 'function') {
        console.log('jWeixin对象不完整，重新加载');
        
        // 设置一个延迟，确保模块已加载
        setTimeout(() => {
          if (typeof jWeixin !== 'undefined' && typeof jWeixin.config === 'function') {
            console.log('jWeixin对象已正确加载，包含config方法');
            this.configWeixin();
          } else {
            console.error('jWeixin对象加载异常，尝试回退到浏览器模式');
            this.isWechatEnv = false;
            this.initBrowserCamera();
          }
        }, 300);
      } else {
        console.log('jWeixin模块已存在，直接配置');
        this.configWeixin();
      }
    },
    
    // 配置微信JSSDK
    async configWeixin() {
      try {
        this.msg = '正在配置微信接口...';
        
        // 再次验证jWeixin对象
        if (typeof jWeixin === 'undefined' || typeof jWeixin.config !== 'function') {
          throw new Error('jWeixin对象未正确加载，无法配置');
        }
        
        // 获取当前页面URL（去除hash部分）
        const url = window.location.href.split('#')[0];
        console.log('当前页面URL:', url);
        
        // 请求后端获取签名配置
        const res = await uni.request({
          url: `${uni.$config.baseUrl}/wx/jssdk/config`,
          method: 'GET',
          data: { url: url }
        });
        
        if (!res.data || res.data.code !== 200) {
          throw new Error(res.data?.msg || '获取微信配置失败');
        }
        
        const config = res.data.data;
        console.log('获取的微信配置:', config);
        
        // 确保jWeixin对象存在并且有config方法
        if (!jWeixin || typeof jWeixin.config !== 'function') {
          throw new Error('jWeixin对象不完整或config方法不存在');
        }
        
        // 配置jWeixin.config
        try {
          jWeixin.config({
            debug: false, // 生产环境设为false
            appId: config.appId,
            timestamp: config.timestamp,
            nonceStr: config.nonceStr,
            signature: config.signature,
            jsApiList: [
              'checkJsApi',
              'chooseImage',
              'getLocalImgData',
              'previewImage',
              'uploadImage',
              'downloadImage'
            ]
          });
          console.log('jWeixin.config调用成功');
        } catch (configError) {
          console.error('jWeixin.config调用失败:', configError);
          throw new Error('配置微信接口失败: ' + configError.message);
        }
        
        // 注册ready回调
        jWeixin.ready(() => {
          console.log('微信JSSDK配置成功');
          this.wxReady = true;
          this.msg = '微信环境已就绪';
          
          // 检查API可用性
          jWeixin.checkJsApi({
            jsApiList: ['chooseImage'],
            success: (res) => {
              console.log('API检查结果:', res.checkResult);
              if (res.checkResult.chooseImage) {
                // 在微信环境下使用前置摄像头启动拍照（无需弹窗引导）
                this.openWechatCamera();
              } else {
                this.msg = '当前微信版本不支持拍照功能，将尝试使用浏览器模式';
                this.isWechatEnv = false;
                this.initBrowserCamera();
              }
            },
            fail: (err) => {
              console.error('API检查失败:', err);
              this.msg = '微信接口检查失败，将尝试使用浏览器模式';
              this.isWechatEnv = false;
              this.initBrowserCamera();
            }
          });
        });
        
        // 注册error回调
        jWeixin.error((res) => {
          console.error('微信JSSDK配置失败:', res);
          this.msg = '微信配置失败: ' + res.errMsg + '，将尝试使用浏览器模式';
          // 回退到浏览器模式
          this.isWechatEnv = false;
          setTimeout(() => {
            this.initBrowserCamera();
          }, 1000);
        });
        
      } catch (error) {
        console.error('配置微信JSSDK失败:', error);
        this.msg = '微信配置出错: ' + error.message + '，将尝试使用浏览器模式';
        // 回退到浏览器模式
        this.isWechatEnv = false;
        setTimeout(() => {
          this.initBrowserCamera();
        }, 1000);
      }
    },
    
    // 添加一个新方法用于从微信环境切换到浏览器环境
    switchToBrowserCamera() {
      this.showGuide = false;
      this.isWechatEnv = false;
      this.msg = '正在切换到浏览器摄像头...';
      
      // 延迟执行，让UI先更新
      setTimeout(() => {
        this.initBrowserCamera();
      }, 500);
    },
    
    // 获取微信图片的base64数据
    getWechatImageData() {
      return new Promise((resolve, reject) => {
        if (!this.cameraImage) {
          reject(new Error('没有可用的图片'));
          return;
        }
        
        // 确保jWeixin对象存在
        if (!jWeixin) {
          reject(new Error('微信接口不可用'));
          return;
        }
        
        // 尝试使用getLocalImgData API
        if (jWeixin.getLocalImgData) {
          jWeixin.getLocalImgData({
            localId: this.cameraImage,
            success: (res) => {
              // 检查返回的数据格式，尤其是iOS设备
              let localData = res.localData;
              
              // iOS返回的是base64格式并带有前缀，而Android会直接返回正确格式
              if (localData.indexOf('data:image') === 0) {
                // iOS格式: "data:image/jgp;base64," + "实际图片base64数据"
                localData = localData.replace(/^data:image\/(png|jpeg|jpg);base64,/, '');
              } else if (localData.indexOf('wx_fmt=') !== -1) {
                // 某些微信版本会返回特殊格式: wx_fmt=jpeg;base64,
                localData = localData.replace(/^wx_fmt=(jpeg|png|jpg);base64,/, '');
              }
              
              resolve(localData);
            },
            fail: (err) => {
              console.error('获取图片数据失败:', err);
              
              // 记录更详细的错误信息以便调试
              console.log('错误详情:', JSON.stringify(err));
              
              // 尝试使用canvas方法处理
              this.processImageWithCanvas(this.cameraImage)
                .then(resolve)
                .catch(reject);
            }
          });
        } else {
          // 如果API不可用，使用canvas方法
          this.processImageWithCanvas(this.cameraImage)
            .then(resolve)
            .catch(reject);
        }
      });
    },
    
    // 使用Canvas处理图片获取base64
    processImageWithCanvas(localId) {
      return new Promise((resolve, reject) => {
        try {
          const img = new Image();
          img.crossOrigin = 'anonymous';
          img.src = localId;
          
          // 添加加载超时处理
          const timeout = setTimeout(() => {
            reject(new Error('图片加载超时'));
          }, 5000); // 5秒超时
          
          img.onload = () => {
            clearTimeout(timeout);
            const canvas = document.getElementById('canvasCamera');
            const ctx = canvas.getContext('2d');
            
            // 清空canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 计算绘制参数以保持比例
            let dWidth = canvas.width;
            let dHeight = canvas.height;
            let dx = 0;
            let dy = 0;
            
            if (img.width / img.height > canvas.width / canvas.height) {
              dHeight = canvas.width * img.height / img.width;
              dy = (canvas.height - dHeight) / 2;
            } else {
              dWidth = canvas.height * img.width / img.height;
              dx = (canvas.width - dWidth) / 2;
            }
            
            // 绘制图片
            ctx.drawImage(img, dx, dy, dWidth, dHeight);
            
            try {
              // 获取base64数据
              let base64 = canvas.toDataURL('image/jpeg', 0.8);
              
              // 处理iOS上可能的图片数据格式
              if (base64.startsWith('data:image/jpeg;base64,')) {
                base64 = base64.split(',')[1];
              }
              
              resolve(base64);
            } catch (canvasError) {
              // 特殊处理canvas跨域错误
              console.error('Canvas处理失败，可能是跨域问题:', canvasError);
              reject(new Error('图片处理失败，可能是因为跨域限制'));
            }
          };
          
          img.onerror = (err) => {
            clearTimeout(timeout);
            console.error('图片加载失败:', err);
            // 尝试降级处理
            if (localId.indexOf('wxlocalresource') >= 0) {
              // 特殊处理微信本地资源错误
              reject(new Error('微信本地资源无法直接访问，请尝试重新拍照'));
            } else {
              reject(new Error('图片加载失败'));
            }
          };
        } catch (err) {
          console.error('Canvas处理图片失败:', err);
          reject(err);
        }
      });
    },
    
    // 直接打开微信相机 - 无需引导
    openWechatCamera() {
      this.msg = '正在启动相机...';
      
      // 确保jWeixin对象存在
      if (!jWeixin || typeof jWeixin.chooseImage !== 'function') {
        console.error('jWeixin.chooseImage方法不存在，无法启动相机');
        this.msg = '微信相机功能不可用，将尝试使用浏览器模式';
        this.showPermissionGuidance();
        return;
      }
      
      // 添加完整的错误处理机制
      try {
        jWeixin.chooseImage({
          count: 1, // 只选一张图片
          sizeType: ['original', 'compressed'], // 原图和压缩图都可以，增加成功率
          sourceType: ['camera'], // 只允许拍照
          success: (res) => {
            console.log('微信拍照成功:', res);
            const localId = res.localIds[0];
            
            // 显示预览图片
            this.cameraImage = localId;
            this.isCameraReady = true;
            this.msg = '摄像头已准备好，正在开始识别...';
            
            // 获取图片数据后立即开始人脸识别
            this.getWechatImageData().then(imageData => {
              this.performFaceRecognition(imageData);
            }).catch(err => {
              console.error('获取图片数据失败:', err);
              this.msg = `获取照片数据失败: ${err.message}，请刷新重试`;
              
              // 在iOS上特别处理
              const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
              if (isIOS) {
                this.msg = '检测到iOS设备，正在尝试替代方案...';
                // 尝试使用其他API获取图片（iOS可能会有特殊限制）
                setTimeout(() => {
                  this.openWechatCamera(); // 重试一次
                }, 1000);
              }
            });
          },
          fail: (err) => {
            console.error('微信拍照失败:', err);
            
            // 针对"permission value is offline verifying"错误的特殊处理
            if (err.errMsg && err.errMsg.includes('offline verifying')) {
              console.log('检测到微信权限验证中错误，显示引导界面');
              this.msg = '微信正在验证摄像头权限，请选择操作方式...';
              this.showPermissionGuidance();
              return;
            }
            
            // 针对拒绝权限的情况
            if (err.errMsg.includes('auth deny') || err.errMsg.includes('permission')) {
              this.msg = '相机权限被拒绝，请允许使用相机';
              this.showPermissionGuidance();
            } else if (err.errMsg.includes('cancel')) {
              this.msg = '您取消了拍照，请点击"开始识别"重试';
            } else {
              this.msg = '拍照失败: ' + err.errMsg;
              // 如果是微信环境问题，显示引导界面
              if (err.errMsg.includes('function_not_exist') || err.errMsg.includes('permission') || err.errMsg.includes('config')) {
                this.showPermissionGuidance();
              }
            }
          },
          complete: () => {
            // 完成回调，无论成功失败都执行
            console.log('微信拍照流程完成');
          }
        });
      } catch (error) {
        console.error('调用微信相机时发生错误:', error);
        this.msg = '微信相机调用异常，尝试切换到浏览器模式';
        setTimeout(() => {
          this.isWechatEnv = false;
          this.initBrowserCamera();
        }, 1500);
      }
    },
    
    // 添加提示信息并引导用户到权限设置页的函数
    showPermissionGuidance() {
      // 显示提示弹窗
      this.showGuide = true;
      this.msg = '请允许使用摄像头以完成人脸识别';
    },

    // 使用微信的拍照功能（仅在指导弹窗中使用）
    takeWechatPhoto() {
      this.showGuide = false;
      
      // 尝试使用微信拍照功能
      if (this.isWechatEnv) {
        this.openWechatCamera();
      } else {
        // 如果已经切换到了浏览器模式，重新尝试初始化浏览器摄像头
        this.initBrowserCamera();
      }
    },
    
    // 初始化浏览器摄像头 (非微信环境) - 设置为前置摄像头
    async initBrowserCamera() {
      try {
        // 检查浏览器是否支持
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
          throw new Error('您的浏览器不支持摄像头访问，请使用Chrome或Safari');
        }
        
        // 在开始前清理任何可能存在的旧流
        if (this.videoStream) {
          this.videoStream.getTracks().forEach(track => track.stop());
          this.videoStream = null;
        }
        
        // 请求摄像头权限 - 指定使用前置摄像头
        this.videoStream = await navigator.mediaDevices.getUserMedia({
          video: {
            width: { ideal: this.videoWidth },
            height: { ideal: this.videoHeight },
            facingMode: "user" // 明确指定使用前置摄像头
          },
          audio: false
        });
        
        // 获取视频元素
        const video = document.getElementById('videoCamera');
        if (!video) {
          throw new Error('未找到视频元素');
        }

        // 设置视频源
        video.srcObject = this.videoStream;
        
        // 播放视频
        await video.play();

                // 保存视频引用
                this.faceOption = {
                  thisVideo: video,
                  videoWidth: this.videoWidth,
                  videoHeight: this.videoHeight,
                  canvasId: 'canvasCamera'
        };
        
        this.isCameraReady = true;
        this.msg = '摄像头已就绪，开始自动识别...';
        
        // 开始自动识别
        this.startAutoRecognition();

      } catch (error) {
        console.error('初始化摄像头失败:', error);
        
        if (error.name === 'NotAllowedError' || error.name === 'PermissionDeniedError') {
          this.msg = '摄像头权限被拒绝，请允许访问';
          this.showGuide = true;
        } else if (error.name === 'NotFoundError' || error.name === 'DevicesNotFoundError') {
          this.msg = '未检测到摄像头设备，请确保您的设备有摄像头';
          uni.showToast({
            title: '未检测到摄像头设备',
            icon: 'none',
            duration: 3000
          });
        } else if (error.name === 'NotReadableError' || error.name === 'TrackStartError') {
          this.msg = '摄像头已被其他应用占用，请关闭其他使用摄像头的应用后重试';
          uni.showToast({
            title: '摄像头被占用',
            icon: 'none',
            duration: 3000
          });
        } else {
          this.msg = '摄像头初始化失败: ' + error.message;
        }
        
        // 尝试切换回微信模式，除非已经尝试过多次
        if (this.retryCount < this.maxRetries && navigator.userAgent.includes('MicroMessenger')) {
          this.retryCount++;
          this.isWechatEnv = true;
          setTimeout(() => {
            this.initWechatJssdk();
          }, 1500);
        }
      }
    },
    
    // 开始自动人脸识别
    startAutoRecognition() {
      // 防止重复启动识别
      if (this.recognitionTimer) {
        clearInterval(this.recognitionTimer);
      }
      
      this.recognitionCount = 0;
      this.msg = '正在进行自动人脸识别，请面向摄像头...'
      this.recognitionRetryCount = 0;
      this.recognitionFailed = false;
      
      // 设置识别的间隔时间
      const recognitionInterval = 1500; // 1.5秒间隔
      
      // 先立即尝试一次识别，不等待定时器
      this.captureAndRecognize();
      
      // 然后设置定时器定期尝试
      this.recognitionTimer = setInterval(() => {
        // 如果识别成功或者超过最大重试次数，停止定时器
        if (this.recognitionSuccessful || this.recognitionRetryCount >= 3) {
          this.stopAutoRecognition();
          
          // 如果识别失败，且重试次数达到上限，提示用户
          if (!this.recognitionSuccessful && this.recognitionRetryCount >= 3) {
            this.recognitionFailed = true;
            this.msg = '自动识别失败，请尝试手动点击"开始识别"按钮或检查摄像头';
            
            // 在微信环境下尝试切换到手动拍照模式
            if (this.isWechatEnv) {
              setTimeout(() => {
                this.msg = '正在切换到手动拍照模式...';
                this.openWechatCamera();
              }, 2000);
            }
          }
          return;
        }
        
        // 执行人脸捕获和识别
        this.captureAndRecognize();
      }, recognitionInterval);
    },
    
    // 停止自动人脸识别
    stopAutoRecognition() {
      if (this.recognitionTimer) {
        clearInterval(this.recognitionTimer);
        this.recognitionTimer = null;
      }
    },
    
    // 捕获图像并进行识别
    captureAndRecognize() {
      this.recognitionCount++;
      
      // 根据环境选择不同的捕获方法
      if (this.isWechatEnv) {
        // 在微信环境中，如果已经有图像，直接使用；否则打开相机
        if (this.cameraImage) {
          this.getWechatImageData()
            .then(imageData => {
              this.performFaceRecognition(imageData);
            })
            .catch(err => {
              console.error('获取图片数据失败:', err);
              this.msg = `获取照片数据失败: ${err.message || '未知错误'}`;
              this.recognitionRetryCount++;
              
              // 在严重错误的情况下，尝试重新打开相机
              if (this.recognitionRetryCount >= 2) {
                setTimeout(() => {
                  this.openWechatCamera();
                }, 1000);
              }
            });
        } else {
          // 没有图像，打开微信相机
          this.openWechatCamera();
        }
      } else {
        // 浏览器环境，通过视频流捕获图像
        this.captureImage()
          .then(imageData => {
            this.performFaceRecognition(imageData);
          })
          .catch(err => {
            console.error('捕获图像失败:', err);
            this.msg = `捕获图像失败: ${err.message || '未知错误'}`;
            this.recognitionRetryCount++;
            
            // 在错误情况下，尝试重新初始化相机
            if (this.recognitionRetryCount >= 2) {
              this.msg = '摄像头捕获失败，正在重新初始化...';
              setTimeout(() => {
                this.initBrowserCamera();
              }, 1000);
            }
          });
      }
    },
    
    // 捕获图像
    captureImage() {
      return new Promise((resolve, reject) => {
        try {
          if (this.isWechatEnv) {
            // 微信环境，使用微信相机
            if (this.cameraImage) {
              this.getWechatImageData()
                .then(resolve)
                .catch(reject);
            } else {
              reject(new Error('没有微信相机图像'));
            }
          } else {
            // 浏览器环境，使用视频流
            if (!this.videoStream || !this.faceOption.thisVideo) {
              reject(new Error('摄像头未就绪'));
              return;
            }
            
            // 使用canvas捕获当前视频帧
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            
            canvas.width = this.faceOption.thisVideo.videoWidth;
            canvas.height = this.faceOption.thisVideo.videoHeight;
            
            // 检查视频是否已加载
            if (this.faceOption.thisVideo.videoWidth === 0 || this.faceOption.thisVideo.videoHeight === 0) {
              reject(new Error('视频未加载完成'));
              return;
            }
            
            // 绘制视频帧到canvas
            context.drawImage(this.faceOption.thisVideo, 0, 0, canvas.width, canvas.height);
            
            try {
              // 获取base64图像数据
              const imageData = canvas.toDataURL('image/jpeg', 0.8).split(',')[1];
              resolve(imageData);
            } catch (err) {
              console.error('获取图像数据失败:', err);
              reject(new Error('获取图像数据失败'));
            }
          }
        } catch (err) {
          console.error('捕获图像过程中出错:', err);
          reject(err);
        }
      });
    },
    
    // 执行人脸识别
    performFaceRecognition(imageData) {
      // 防止重复识别
      if (this.recognitionInProgress) {
        return;
      }
      
      this.recognitionInProgress = true;
      this.msg = '正在进行人脸识别分析...';
      
      // 构建请求数据
      const faceData = {
        userId: this.userId,
        base64Img: imageData
      };
      
      // 显示加载
      uni.showLoading({
        title: '识别中...',
        mask: true
      });
      
      try {
        // 向后端API发送请求
        uni.request({
          url: this.apiBaseUrl + '/common/face/verify',
          method: 'POST',
          header: this.headers,
          data: faceData,
          timeout: 30000, // 30秒超时
          success: (res) => {
            console.log('人脸识别结果:', res);
            uni.hideLoading();
            
            // 检查请求是否成功
            if (res.statusCode === 200 && res.data && res.data.code === 0) {
              // 人脸识别成功
              this.recognitionSuccessful = true;
              this.msg = '人脸识别成功！';
              
              // 停止自动识别
              this.stopAutoRecognition();
              
              // 释放相机资源
              this.releaseCamera();
              
              // 延迟返回上一页或进行其他操作
              setTimeout(() => {
                const verifyResult = {
                  success: true,
                  verified: true,
                  userId: this.userId,
                  timestamp: new Date().getTime()
                };
                
                // 存储验证结果到缓存
                uni.setStorage({
                  key: 'faceVerifyResult',
                  data: verifyResult
                });
                
                // 根据回调地址或返回上一页
                if (this.callbackUrl) {
                  uni.redirectTo({
                    url: this.callbackUrl + '?verified=true'
                  });
                } else {
                  uni.navigateBack();
                }
              }, 1000);
            } else {
              // 识别失败，记录原因并增加重试计数
              const errorMsg = res.data?.msg || '未知错误';
              console.error('人脸识别失败:', errorMsg);
              
              this.recognitionRetryCount++;
              this.msg = `人脸识别失败: ${errorMsg}`;
              
              // 提供更友好的错误提示
              let userFriendlyMessage = '请确保面部清晰可见，光线充足';
              
              if (errorMsg.includes('未检测到人脸') || errorMsg.includes('人脸不清晰')) {
                userFriendlyMessage = '未检测到人脸或人脸不清晰，请调整姿势和光线';
              } else if (errorMsg.includes('多张人脸')) {
                userFriendlyMessage = '检测到多张人脸，请确保画面中只有您一人';
              } else if (errorMsg.includes('匹配失败') || errorMsg.includes('不匹配')) {
                userFriendlyMessage = '人脸匹配失败，请确认是注册用户本人';
              }
              
              this.msg = userFriendlyMessage;
              
              // 如果重试次数少于最大值，继续尝试
              if (this.recognitionRetryCount < 3) {
                setTimeout(() => {
                  this.recognitionInProgress = false; // 重置进行中状态
                }, 1000);
              } else {
                // 超过最大重试次数，停止自动识别
                this.stopAutoRecognition();
                this.recognitionFailed = true;
                this.msg = '自动识别多次失败，请尝试手动点击"开始识别"按钮';
              }
            }
          },
          fail: (err) => {
            console.error('人脸识别请求失败:', err);
            uni.hideLoading();
            
            this.recognitionRetryCount++;
            this.msg = '网络请求失败，请检查网络连接';
            
            // 如果是网络问题，给用户更明确的提示
            if (err.errMsg && (err.errMsg.includes('timeout') || err.errMsg.includes('network'))) {
              this.msg = '网络连接超时，请检查网络设置';
            }
            
            // 重置进行中状态，允许下次重试
            setTimeout(() => {
              this.recognitionInProgress = false;
            }, 1000);
          },
          complete: () => {
            this.recognitionInProgress = false;
          }
        });
      } catch (err) {
        console.error('执行人脸识别过程中出错:', err);
        uni.hideLoading();
        
        this.msg = '识别过程出错，请刷新重试';
        this.recognitionInProgress = false;
        this.recognitionRetryCount++;
      }
    },
    
    // 人脸验证（手动触发按钮回调）
    async faceVef() {
      // 如果正在识别中，不重复操作
      if (this.faceImgState) return;
      
      try {
        // 捕获图像并执行识别
        const imageBase = await this.captureImage();
        await this.performFaceRecognition(imageBase);
      } catch (error) {
        console.error('手动识别失败:', error);
        
        if (this.isWechatEnv && error.message.includes('等待拍照')) {
          // 微信环境下，如果没有照片，尝试打开相机
          this.openWechatCamera();
        } else {
          uni.showToast({ 
            title: error.message || '验证失败', 
            icon: 'none',
            duration: 2000
          });
        }
      }
    },
    
    // 释放摄像头资源
    releaseCamera() {
      // 停止自动识别
      this.stopAutoRecognition();
      
      if (this.videoStream) {
        this.videoStream.getTracks().forEach(track => track.stop());
        this.videoStream = null;
      }
      
      if (this.faceOption.thisVideo) {
        this.faceOption.thisVideo.srcObject = null;
      }
      
      this.cameraImage = null;
      this.isCameraReady = false;
    }
  }
};
</script>
<style>
@import "./index.css";

/* 固定页面居中样式 */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 容器居中样式 */
div {
  box-sizing: border-box;
}

/* 全屏容器 */
.face-valid-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* 覆盖login的样式 */
.login {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url(~@/static/login/login-bg.png) no-repeat center center;
  background-size: cover;
  filter: blur(10px);
  z-index: -1;
}

/* 覆盖login-mid的样式，确保在所有设备上居中显示 */
.login-mid {
  position: relative !important;
  width: 90% !important; /* 移动端使用更大的宽度 */
  max-width: 450px !important; /* 最大宽度限制 */
  height: 80vh !important; /* 高度自适应 */
  min-height: 400px !important;
  max-height: 700px !important;
  background-color: rgba(37, 76, 102, 0.5) !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  border-radius: 10px !important; /* 添加圆角 */
  overflow: hidden !important; /* 确保内容不溢出 */
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* 优化中间内容的布局 */
.login-mid-mid {
  width: 100%;
  height: auto !important;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 20px 0;
}

/* 添加自定义样式，覆盖index.css中可能冲突的样式 */
.face-special-effects,
.face-special-effects-2 {
  z-index: 10 !important; /* 降低特效的z-index，确保不会挡住弹窗 */
  width: 250px !important; /* 调整特效大小 */
  height: 250px !important;
  background-size: contain !important;
}

.videoCamera-canvasCamera {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  z-index: 5; /* 确保视频容器层级低于弹窗 */
}

/* 微信环境加载样式 */
.wx-loading {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 0 20px;
}

/* 引导界面样式 */
.guide-overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999999999; /* 提高z-index确保在最上层 */
}

.guide-content {
  width: 80%;
  max-width: 300px;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  position: relative; /* 添加相对定位 */
  z-index: 99999999999; /* 确保内容在最上层 */
}

.guide-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.guide-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.guide-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.5;
}

.guide-button-container {
  margin-top: 20px;
  position: relative;
  z-index: 999999999999; /* 确保容器在最上层 */
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.guide-button {
  background-color: #07C160;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 20px;
  font-size: 16px;
  position: relative; /* 添加相对定位 */
  z-index: 999999999999; /* 确保按钮在最上层 */
  cursor: pointer; /* 添加指针样式提升用户体验 */
  width: 80%;
  max-width: 200px;
}

/* 添加替代按钮样式 */
.guide-button.alt-button {
  background-color: #4c7dff;
  color: white;
}

.guide-button.alt-button:active {
  background-color: #3a6be6;
}

/* 增加按钮激活状态样式 */
.guide-button:active {
  background-color: #06ad56;
  transform: scale(0.98);
}

/* 图片预览容器 */
.preview-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 媒体查询，适应不同屏幕尺寸 */
@media screen and (max-width: 768px) {
  .login-mid {
    width: 95% !important;
    height: 70vh !important;
  }
}

@media screen and (max-height: 650px) {
  .login-mid {
    height: 85vh !important;
    min-height: 350px !important;
  }
  
  .face-btn {
    margin-top: 20px;
  }
  
  .msg {
    height: 60px;
  }
}
</style> 
